// 引入 react 依赖
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Text, View, Image, TouchableOpacity, ImageBackground, ScrollView, TextInput, InteractionManager, Modal } from 'react-native';

// 引入第三方依赖
import _ from 'lodash';
import pureRender from 'pure-render-decorator';
import { Actions } from 'react-native-router-flux';

// antd 按需加载
import { InputItem, Tabs, Toast, Portal, List, Picker } from '@ant-design/react-native';

// 引入 处理数据 所需文件
import { agentRegion } from '../../../../module/module.js'

// 引入公用组件
import { Radio } from '../../../../components/index.js'

// 引入工具包
import { press, size, ScreenWidth, ScreenHeight, borderBottom, hotTextColor, validation, defaultDataList, onEndReached, onRefresh, concatDataList, defaultPage } from '../../../../util/utils.js'

class Distpicker extends Component {

	constructor(props) {
		super(props)
		this.state = {
			province: [],
			city: [],
			area: [],
			town: [],
			provinceId: '',
			provinceName: '',
			cityId: '',
			cityName: '',
			areaId: '',
			areaName: '',
			townId: '',
			townName: '',
			selectModal: 0,
			visible: false
		}
	}


	componentDidMount() {
	}

	agentRegion(pid, type) {
		agentRegion({ pid }).then(res => {
			console.log(res, 122)
			let list = res.data.map((item, index) => {
				return {
					value: item.id,
					label: item.name,
				}
			})
			switch (type) {
				case 'province':
					this.setState({
						province: list,
					})
					break;
				case 'city':
					this.setState({
						city: list,
					})
					break;
				case 'area':
					this.setState({
						area: list,
					})
					break;
				case 'town':
					this.setState({
						town: list,
					})
					break;
				default:
					break;
			}
		})
	}

	hanfleOnPress() {
		const { onPress } = this.props
		const { provinceName, cityName, areaName, townName, provinceId, cityId, areaId, townId } = this.state
		if (!provinceId) {
			Toast.info('请选择省份', 1, null, false);
			return
		}
		if (!cityId) {
			Toast.info('请选择市', 1, null, false);
			return
		}
		// if (!areaId) {
		// 	Toast.info('请选择区', 1, null, false);
		// 	return
		// }
		// if (!townId) {
		// 	Toast.info('请选择乡镇', 1, null, false);
		// 	return
		// }

		onPress({
			areaId,
			areaName,
			cityId,
			cityName,
			provinceId,
			provinceName,
			townId,
			townName,
		})
		this.onClose()
	}



	pickAddress() {
		const { provinceId, provinceName, cityId, cityName, areaId, areaName, townId, townName } = this.props.details

		let selectModal = 0

		if (townName && townId) {
			selectModal = 3
		}

		if (townId) {
			this.agentRegion(areaId, 'town')
		} else {
			this.agentRegion(0, 'province')
		}

		this.setState({
			provinceId,
			provinceName,
			cityId,
			cityName,
			areaId,
			areaName,
			townId,
			townName,
			selectModal,
			visible: true
		})
	}


	onClose = () => {
		this.setState({
			visible: false
		})
	}

	render() {
		const { province, visible, selectModal, city, area, town, provinceId, cityId, areaId, townId, provinceName, cityName, areaName, townName, } = this.state
		const { } = this.props
		console.log(selectModal, townName)
		console.log(selectModal >= 3 && townName)
		return (
			<View style={{}}>
				<TouchableOpacity activeOpacity={1} onPress={() => this.pickAddress()}>
					<View
						style={{
							height: 50,
							paddingTop: 10,
							paddingBottom: 10,
							padding: 0,
							paddingRight: 15,
							...borderBottom()
						}}>
						{!provinceName && !cityName && !areaName && !townName ?
							<Text style={{
								color: '#61676F',
								fontSize: 14,
								lineHeight: 30,
							}}>
								请选择地址
								</Text>
							:
							<Text style={{
								color: '#333',
								fontSize: 14,
								lineHeight: 30,
							}}>
								{provinceName} {cityName} {areaName} {townName}
							</Text>
						}
					</View>
				</TouchableOpacity>
				<Modal
					visible={visible}
					transparent={true}
					animationType="slide"
					onRequestClose={() => {
						this.onClose()
					}}
				>
					<View style={{ flex: 1 }}>
						<TouchableOpacity onPress={this.onClose} style={{ flex: 1, backgroundColor: '#000', opacity: .4 }} />
						<View style={{
							height: ScreenHeight - 200,
							backgroundColor: '#fff'
						}}>
							<View style={{
								flexDirection: 'row',
								alignItems: 'center',
								justifyContent: 'space-between',
							}}>
								<View style={{
									flexDirection: 'row',
									alignItems: 'center',
									flex: 1
								}}>
									<ScrollView horizontal>
										{selectModal >= 0 ? (
											<TouchableOpacity
												activeOpacity={1}
												style={[{
												}, selectModal == 0 ? borderBottom({ width: 4 }) : {}]}
												onPress={() => {
													this.setState({
														selectModal: 0
													})
													this.agentRegion(provinceId, 'city')
												}}
											>
												<Text style={{ fontSize: 14, color: '#61676F', lineHeight: 16, padding: 15, }}>{provinceName || '请选择'}</Text>
											</TouchableOpacity>
										) : null}
										{selectModal >= 1 ? (
											<TouchableOpacity
												activeOpacity={1}
												style={[{
												}, selectModal == 1 ? borderBottom({ width: 4 }) : {}]}
												onPress={() => {
													this.setState({
														selectModal: 1
													})
													this.agentRegion(cityId, 'area')
												}}>
												<Text style={{ fontSize: 14, color: '#61676F', lineHeight: 16, padding: 15, }}>{cityName || '请选择'}</Text>
											</TouchableOpacity>
										) : null}
									</ScrollView>
								</View>
								{selectModal >= 1 && cityName ? (
									<TouchableOpacity activeOpacity={1} style={{}} onPress={() => this.hanfleOnPress()}>
										<Text style={{ fontSize: 14, color: '#61676F', lineHeight: 16, padding: 15, }}>确定</Text>
									</TouchableOpacity>
								) : null}
							</View>
							{province && selectModal == 0 && (
								<ScrollView
									style={{ height: ScreenHeight - 200, }}
								>
									{province.map((item, index) => {
										return (
											<TouchableOpacity activeOpacity={1} key={index} onPress={() => {
												this.setState({
													provinceId: item.value,
													provinceName: item.label,
													selectModal: 1
												})
												this.agentRegion(item.value, 'city')
											}}>
												<Text style={[{ fontSize: 14, color: '#61676F', lineHeight: 16, padding: 15, }, provinceId == item.value ? { color: hotTextColor } : {}]}>{item.label}</Text>
											</TouchableOpacity>
										)
									})}
								</ScrollView>
							)}
							{city && selectModal == 1 && (
								<ScrollView
									style={{ height: ScreenHeight - 200, }}
								>
									{city.map((item, index) => {
										return (
											<TouchableOpacity activeOpacity={1} key={index} onPress={() => {
												this.setState({
													cityId: item.value,
													cityName: item.label,
													selectModal: 2
												})
												this.agentRegion(item.value, 'area')
											}}>
												<Text style={[{ fontSize: 14, color: '#61676F', lineHeight: 16, padding: 15, }, cityId == item.value ? { color: hotTextColor } : {}]}>{item.label}</Text>
											</TouchableOpacity>
										)
									})}
								</ScrollView>
							)}
						</View>
					</View>
				</Modal>
			</View>
		);
	}
}

export default pureRender(Distpicker)
